<template>
  <view :style="containerStyle" class="comp-safe-area">
    <slot />
  </view>
</template>
<script>
/**
 * 屏幕底部安全区
 * 适用场景：
 *  1. 固定在窗口底部的tabbar
 *  2. 页面底部存在重要的点击区域
 *  3. 页面底部的区域存在与系统操作区混合的手势
 * @props styles {Object} 安全区容器样式对象
 * @slot default {Object} 安全区内插槽
 * 使用方式：
 *  如：<basic-safe-area :style="{background: '#ffffff'}" />
 *  
 * 备注： 1. 不是所有的页面都需要做安全区域处理，请按需使用。
 *        2. 该组件做了easycom的规范配置，无需额外引入，直接在template中使用    "basic-safe-area"作为组件标签
 */
import sdk from 'sdk'
import {transStyleObject} from 'utils/helper/style'
import {isObject} from 'utils/helper/validator'
let safeAreaHeight = sdk.getSafeAreaHeight()

export default {
  name: 'safe-area',
  
  props: {
    styles: { // 安全区的样式
      type: Object,
      default: () => ({})
    }
  },
  
  computed: {
    containerStyle() {
      let styles = isObject(this.styles) ? this.styles : {}

      styles = {
        height: safeAreaHeight +'px',
        ...styles
      }

      let style = transStyleObject(styles)

      return style
    }
  }
}
</script>
<style lang="less">
.comp-safe-area {
  width: 100%;
  height: 0;
}
</style>